<template>
	<div class="titles"> 我要卖车 </div>
	
	<div class="left">
		
		<van-cell-group title="填写车辆资料">
			<van-form @submit="onSubmit">
			  <van-cell-group inset>
			    <van-field
			      v-model="brand"
			      name="brand"
			      label="品牌"
			      placeholder="例如:奔驰E300L"
			      :rules="[{ required: true, message: '请填写车辆品牌' }]"
			    />
				<van-field
				  v-model="cc"
				  name="cc"
				  label="排量"
				  placeholder="例如:3.0T"
				  :rules="[{ required: true, message: '请填写排量' }]"
				/>
				<van-field
				  v-model="style"
				  name="style"
				  label="款式"
				  placeholder="例如:2020款 豪华型"
				  :rules="[{ required: true, message: '请填写车辆款式' }]"
				/>
				<van-field
				  v-model="year"
				  name="year"
				  label="上牌时间"
				  placeholder="例如:2020-11-3"
				  :rules="[{ required: true, message: '请填写车辆上牌日期' }]"
				/>
			    
			  </van-cell-group>
			  <van-cell-group title="上传车辆状况照片">
			  	<van-uploader :after-read="afterRead" v-model="fileList" multiple class="left"/>
			  </van-cell-group>
			  <div style="margin: 16px;">
			    <van-button round block type="primary" native-type="submit">
			      立即估价
			    </van-button>
			  </div>
			</van-form>
		</van-cell-group>
	</div>
	
	
	
	
	
</template>



<script lang="ts" setup>
	import { ref } from 'vue';
	import {onMounted} from 'vue';
	
	onMounted(()=>{
		console.log("this is on Mounted")
		changeGuidActive()
	})
	const $emit = defineEmits(['change'])
	const changeGuidActive = () => {
		console.log("change",2)
		$emit("change",2)
	}
	
	
	const afterRead = (file) => {
	    // 此时可以自行将文件上传至服务器
	    console.log(file);
	};
	
	const fileList = ref([
	      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
	      // Uploader 根据文件后缀来判断是否为图片文件
	      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
	      { url: 'https://cloud-image', isImage: true },
	    ]);	
		
	const brand = ref('');
	const cc = ref('');
	const style = ref('');
	const year = ref('');
	
	const onSubmit = (values) => {
	    console.log('submit', values);
	};
		
		
	
</script>



<style>
	.left {
		padding-left: 2%;
	}
	
</style>